<template>
	<view class="editor">
		<view>
			<view class="title">我的头像</view>
			<view class="imgList" style="position: relative;">
				<view class="headurl" style="position: absolute;background: rgba(0,0,0,0.6);left: 50%;transform: translateX(-50%);z-index: 99999;display: flex;align-items: center;justify-content: center;" v-if="imgNameShow">
					<view style="font-size: 30upx;height: 30upx;
			line-height: 30upx;
			text-align: center;
			width: 100upx;
			background: #FF574D;
			border-radius: 15upx;
			font-size: 18upx;
			color: #FFFFFF;">{{imgName}}</view>
				</view>
				<image class="headurl" style="margin: 0 auto;display: block;" :src="headImg" mode="">
				</image>
				<view class="btn" style="font-size: 30upx;height: 54upx;
			line-height: 54upx;
			text-align: center;
			width: 165upx;
			background: #FF574D;
			border-radius: 27upx;
			font-size: 24upx;
			color: #FFFFFF;margin: 0 auto;margin-top: 10upx;" @tap="chooseAvatar">编辑头像</view>
				<!-- <view class="add">
					<image class="addimg" src="../../../st/mini/static/img/editor/del.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<view>
			<view class="title">账号信息</view>
			<view class="list" @click="upPop(1,'昵称')">
				<ul>
					<li class="li1">昵称</li>
					<li class="li2">{{myEditorProfile.nickName}}<text v-if="NickNameShow" style="color: #FF574D;">{{NickNameTip}}</text></li>
					<li class="li3">
						<image class="righticon" :src="$BASE_URL+'/st/mini/static/img/editor/right.png'" mode=""></image>
					</li>
				</ul>
			</view>
			<view class="list" @click="upPop(2,'个性签名')">
				<ul>
					<li class="li1">个性签名</li>
					<li class="li2">{{myEditorProfile.descr}}<text v-if="modifyDescrShow" style="color: #FF574D;">{{modifyDescr}}</text></li>
					<li class="li3">
						<image class="righticon" :src="$BASE_URL+'/st/mini/static/img/editor/right.png'" mode=""></image>
					</li>
				</ul>
			</view>
			<view class="list" @click="upPop(3,'个性标签')">
				<ul>
					<li class="li1">个性标签</li>
					<li class="li2">
						<text class="tip" v-if="myEditorProfile.interest!=''" v-for="(list,index) in interestList"
							:key="index">{{list}}</text>
					</li>
					<li class="li3">
						<image class="righticon" :src="$BASE_URL+'/st/mini/static/img/editor/right.png'" mode=""></image>
					</li>
				</ul>
			</view>
			<view class="list">
				<ul>
					<li class="li1">个性语音</li>
					<view class="btn" @click="openPop" style="display: flex;align-items: center;">
						<image style="width: 32upx;height: 32upx;margin-left: 30upx;"
							:src="$BASE_URL+'/st/mini/static/img/personal/voice.png'" mode=""></image>
						<text
							style="flex: 1;margin-right: 6upx;">{{myEditorProfile.duration==0?'点击录制':myEditorProfile.duration<10?'0'+myEditorProfile.duration+'"':myEditorProfile.duration}}</text>
					</view>
				</ul>
			</view>
		</view>
		<view>
			<view class="title">个人信息</view>
			<view class="list" @click="upPop(4,'性别')">
				<ul>
					<li class="li1">性别</li>
					<li class="li2">{{myEditorProfile.sex==1?'男':myEditorProfile.sex==2?'女':''}}</li>
					<li class="li3">
						<image class="righticon" :src="$BASE_URL+'/st/mini/static/img/editor/right.png'" mode=""></image>
					</li>
				</ul>
			</view>
			<view class="list" @click="upPop(5,'年龄与星座')">
				<ul>
					<li class="li1">年龄与星座</li>
					<li class="li2">{{myEditorProfile.age}}/{{myEditorProfile.constellation}}</li>
					<li class="li3">
						<image class="righticon" :src="$BASE_URL+'/st/mini/static/img/editor/right.png'" mode=""></image>
					</li>
				</ul>
			</view>
			<view class="list" @click="upPop(6,'身高体重')">
				<ul>
					<li class="li1">身高体重</li>
					<li class="li2" v-if="myEditorProfile.stature!=''">
						{{myEditorProfile.stature}}cm/{{myEditorProfile.weight}}kg
					</li>
					<li class="li3">
						<image class="righticon" :src="$BASE_URL+'/st/mini/static/img/editor/right.png'" mode=""></image>
					</li>
				</ul>
			</view>
			<view class="list" @click="upPop(7,'职业')">
				<ul>
					<li class="li1">职业</li>
					<li class="li2">{{myEditorProfile.profession}}</li>
					<li class="li3">
						<image class="righticon" :src="$BASE_URL+'/st/mini/static/img/editor/right.png'" mode=""></image>
					</li>
				</ul>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="30">
			<view class="pop">
				<view class="top">
					<ul>
						<li class="li1" @click="closePop()">取消</li>
						<li class="li2">{{title}}</li>
						<li class="li3" @click="updateSelfInfoN">保存</li>
					</ul>
				</view>
				<view v-if="num==1" class="txt">
					<textarea class="textarea" v-model="userobjet" maxlength="16" @input="descInput"></textarea>
					<text style="text-align: right;display: inline-block;width: 100%;"><text
							style="color: #FE3269;">{{remnant}}</text>/16</text>
				</view>
				<view v-if="num==2" class="txt">
					<textarea class="textarea" v-model="userobjet1" placeholder="介绍一下自己吧~" maxlength="50"
						@input="descInput1"></textarea>
					<text
						style="text-align: right;display: inline-block;width: 100%;"><text>{{remnant1}}</text>/50</text>
				</view>
				<view v-if="num==3" style="padding: 0 24upx;">
					<view style="border-bottom: 1px solid #F6F6F6;padding-bottom: 30upx;">
						<view style="font-size: 30upx;color: #333333;">已选择的标签<text
								style="text-align: right;color: #666666;display: inline-block;float: right;"><text>{{interestData.length}}</text>/10</text>
						</view>
						<view v-if="interestData.length==0" style="color: #999999;font-size: 30upx;margin-top: 20upx;">
							您还没有添加标签</view>
						<view v-else v-for="(list,index) in interestData" :key="index" @click="delClick(index)"
							style="display: inline-block;">
							<u-tag :text="list" closeable @close="delClick(index)" bg-color="#ffeeee" color="#FF574D"
								close-color="#FF574D" border-color="#ffeeee"
								style="margin-top: 24upx;margin-right: 30upx;display: inline-block;" />
						</view>
					</view>
					<view style="margin-top: 54upx;">
						<view style="margin-bottom: 50upx;">标签</view>
						<u-tag :text="list.name" v-for="(list,index) in interest" :key="index" @click="tagClick(index)"
							:bg-color="list.flag?'#ffeeee':'#F4F4F4'" :color="list.flag?'#FF574D':'#666666'"
							:close-color="list.flag?'#FF574D':'#666666'" :border-color="list.flag?'#ffeeee':'#F4F4F4'"
							style="margin-bottom: 24upx;margin-right: 30upx;display: inline-block;" />
					</view>
				</view>
				<view v-if="num==4">
					<view class="sex">
						<ul @click="changSex(1)" style="margin-right: 164upx;">
							<li>
								<image class="seximg"
									:src="sexManShow==true?$BASE_URL+'/st/mini/static/img/editor/nan.png':$BASE_URL+'/st/mini/static/img/editor/nonan.png'"
									mode=""></image>
							</li>
							<li class="sextxt" :style="sexManShow==true?'color: #5584FB;':''">男生</li>
						</ul>
						<ul @click="changSex(2)">
							<li>
								<image class="seximg"
									:src="sexWomanShow==true?$BASE_URL+'/st/mini/static/img/editor/nv.png':$BASE_URL+'/st/mini/static/img/editor/nonv.png'"
									mode=""></image>
							</li>
							<li class="sextxt" :style="sexWomanShow==true?'color: #ff5d9c;':''">女生</li>
						</ul>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 年龄与星座 -->
		<u-picker mode="time" v-model="showPicker2" :title="title" cancel-color="#333333" confirm-color="#FF574D"
			:params="params" :default-time="defaultTime" end-year="2003" @confirm="updateSelfInfoN">
		</u-picker>
		<!-- 身高体重 -->
		<u-picker mode="multiSelector" v-model="showPicker1" :title="title" cancel-color="#333333"
			confirm-color="#FF574D" :default-selector="select1" :range="selector1" @confirm="updateSelfInfoN">
		</u-picker>
		<!-- 职业 -->
		<u-picker mode="selector" v-model="showPicker" :title="title" cancel-color="#333333" confirm-color="#FF574D"
			:default-selector="select" :range="selector" @confirm="updateSelfInfoN"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				NickNameTip:'',
				NickNameShow:false,
				modifyDescr:'',
				modifyDescrShow:false,
				imgName: '',
				imgNameShow: false,
				headImg: '',
				defaultTime: '2003-01-01',
				classItem: '',
				sexManShow: false,
				sexWomanShow: false,
				show: false,
				showPicker: false,
				selector: ['计算机／互联网／通信', '生产／工艺／制造', '商业／服务业／个体经营', '金融／银行／投资／保险', '文化／广告／传媒', '娱乐／艺术／表演', '医疗／护理／制药',
					'律师／法务', '教育／培训', '公务员／事业单位', '学生'
				],
				select: [0],
				select1: [0, 0],
				showPicker1: false,
				selector1: [],
				showPicker2: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true
				},
				num: 0,
				title: '',
				remnant: 0,
				remnant1: 0,
				remnant2: 0,
				userobjet: '',
				userobjet1: '',
				interest: [],
				interestList: [],
				interestData: [],
				myEditorProfile: [],
				isIndex: true,
				tabList: [],
				photoWalls: [],
				name: '',
				middleName: '', // 图片名称
				multipart_params: '',
				host: '',
				imgDate: ''
			}
		},
		watch: {
			userobjet(curVal, oldVal) {
				if (curVal.length >= 16) {
					this.userobjet = curVal.substring(0, 16)
				}
			},
			userobjet1(curVal, oldVal) {
				if (curVal.length >= 50) {
					this.userobjet1 = curVal.substring(0, 50)
				}
			}
		},
		created() {


			// 监听从裁剪页发布的事件，获得裁剪结果
			// uni.$on('uAvatarCropper', path => {
			// 	this.headImg = path;
			// })
		},
		onShow() {
			this.myEditorProfileInfo()
		},
		methods: {
			chooseAvatar() {
				uni.chooseImage({
					// count:  允许上传的照片数量
					count: 1,
					// sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: "compressed",
					success: res => {
						console.log(res)
						if(res.tempFiles[0].name==undefined){
							this.getsign(res.tempFilePaths[0], res.tempFiles[0].path)
						}else{
							this.getsign(res.tempFilePaths[0], res.tempFiles[0].name)
						}
						
						// uni.previewImage({
						// 	// 对选中的图片进行预览
						// 	urls: res.tempFilePaths,
						// 	// urls:['','']  图片的地址 是数组形式
						// })
					}
				});
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				// this.$u.route({
				// 	// 关于此路径，请见下方"注意事项"
				// 	url: 'node_modules/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
				// 	// 内部已设置以下默认参数值，可不传这些参数
				// 	params: {
				// 		// 输出图片宽度，高等于宽，单位px
				// 		destWidth: 300,
				// 		// 裁剪框宽度，高等于宽，单位px
				// 		rectWidth: 200,
				// 		// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
				// 		fileType: 'jpg',
				// 	}
				// })
			},
			getsign(path, name) {
				var data = {
					url: '/web/p1/oss/getsign/web',
					methods: 'post',
					data: {
						obj: 'admin'
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 0) {
						var obj = res.data.data
						this.host = 'http://ourydc-image.' + obj.host
						var policyBase64 = obj.policy
						var accessid = obj.accessid
						var signature = obj.signature
						var callbackbody = obj.callback
						var key = this.formatDate()
						var g_object_name = this.formatDate() + "." + name.split(".")[1];
						this.middleName = g_object_name
						this.multipart_params = {
							name: g_object_name,
							key: this.imgDate + g_object_name,
							policy: policyBase64,
							OSSAccessKeyId: accessid,
							success_action_status: '200',
							callback: callbackbody,
							signature: signature
						}
						uni.uploadFile({
							url: this.host,
							filePath: path,
							fileType: 'image',
							name: 'file',
							formData: this.multipart_params,
							success: (res) => {
								this.userPhotoReplace()
								// if (res.statusCode != 200) {
								// 	uni.showToast({
								// 		title: '上传失败',
								// 		icon: 'none',
								// 		duration: 2000
								// 	});
								// 	return;
								// }
								// uni.showToast({
								//     title: '上传成功',
								// 	icon: 'success',
								// 	duration: 2000
								// });
								// that.imageUrl  = sign.host+"/"+fileName
							},
							fail: (err) => {
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			userPhotoReplace() {
				var data = {
					url: '/web/v2/api/userExtend/userPhotoReplace',
					methods: 'post',
					data: {
						apiVersion: "2.0",
						imgId: this.photoWalls[0].imgId,
						photoImg: this.middleName
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.myEditorProfileInfo()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			formatDate: function() {
				let date = new Date();
				let Y = date.getFullYear() + "";
				let M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "";
				let D =
					(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";
				let h =
					(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + "";
				let m =
					(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
					"";
				let s =
					date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				let ms;
				if (date.getMilliseconds() < 10) {
					ms = "00" + date.getMilliseconds() + "00";
				} else if (date.getMilliseconds() < 100) {
					ms = "0" + date.getMilliseconds() + "00";
				} else if (date.getMilliseconds() < 1000) {
					ms = date.getMilliseconds() + "00";
				}
				this.imgDate = Y + "/" + M + "/" + D + "/";
				return Y + M + D + h + m + s + ms;
			},
			changSex(num) {
				if (num == 1) {
					this.sexManShow = true
					this.sexWomanShow = false
				} else {
					this.sexManShow = false
					this.sexWomanShow = true
				}
			},
			delClick(index) {
				this.interest.map(list => {
					if (this.interestData[index] == list.name) {
						list.flag = false
					}
				})
				this.interestData.splice(index, 1)
			},
			tagClick(index) {
				this.isIndex = index
				if (this.interestData.length >= 10) {
					uni.showToast({
						title: '最多选择10个个性标签哦~',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.interestData.push(this.interest[index].name)
				const set = new Set(this.interestData)
				this.interestData = [...set]
				this.interestData.map(item => {
					this.interest.map(list => {
						if (item == list.name) {
							list.flag = true
						}
					})
				})
			},
			openPop() {
				uni.showToast({
					title: '更多精彩请下载“哩咔”APP',
					icon: 'none',
					duration: 2000
				});
			},
			upPop(num, title) {
				this.num = num
				this.title = title
				if (num == 3) {
					this.interestData.map(item => {
						this.interest.map(list => {
							if (item == list.name) {
								list.flag = true
							}
						})
					})
				}
				if (num != 4) {
					this.show = true
				} else {
					if (this.myEditorProfile.userInfoUpdateSex == 1 && num == 4) {
						this.show = true
					} else {
						uni.showToast({
							title: '性别仅允许修改一次哦~',
							icon: 'none',
							duration: 2000
						});
					}
				}
				if (num == 5) {
					this.showPicker2 = true
					this.show = false
				}
				if (num == 6) {
					this.showPicker1 = true
					this.show = false
				}
				if (num == 7) {
					this.showPicker = true
					this.show = false
				}
			},
			closePop() {
				this.show = false
				this.myEditorProfileInfo()
			},
			descInput() {
				let txtVal = this.userobjet.length;
				this.remnant = txtVal;
			},
			descInput1() {
				let txtVal = this.userobjet1.length;
				this.remnant1 = txtVal;
			},
			// 初始化
			myEditorProfileInfo(num) {
				this.interestData = []
				this.photoWalls = []
				var data = {
					url: '/web/v2/api/app/myEditorProfileInfo',
					methods: 'post',
					data: {

					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.myEditorProfile = res.data.data
						this.interestList = res.data.data.interest.split('/').splice(0, 3)
						this.userobjet = this.myEditorProfile.nickName
						this.userobjet1 = this.myEditorProfile.descr
						if (this.myEditorProfile.sex == '1') {
							this.sexManShow = true
						}
						if (this.myEditorProfile.sex == '2') {
							this.sexWomanShow = true
						}
						if (num != 1) {
							res.data.data.interest.split('/').map((item, key) => {
								this.interestData.push(item.trim())
							})
						}
						this.selector.map((item, key) => {
							if (item == this.myEditorProfile.profession) {
								this.select = [key]
							}
						})
						var arr = []
						var arr1 = []
						for (var i = 140; i <= 200; i++) {
							arr.push(i + 'cm')
						}
						for (var i = 30; i <= 100; i++) {
							arr1.push(i + 'kg')
						}
						this.selector1 = [
							arr,
							arr1
						]
						this.selector1[0].map((item, key) => {
							this.selector1[1].map((item1, key1) => {
								if (item == this.myEditorProfile.stature + 'cm' && item1 == this
									.myEditorProfile.weight + 'kg') {
									this.select1 = [key, key1]
								}
							})
						})
						var photoWalls = this.myEditorProfile.photoWalls.split('|')
						photoWalls.map((item, key) => {
							this.photoWalls.push(JSON.parse(item))
						})
						this.photoWalls.map((item, key) => {
							item.imgPath = this.$global.getImageUrl(item.imgPath,
								'https://ourydcimage.shenghua6.cn')
						})
						this.headImg = this.photoWalls[0].imgPath
						if (this.photoWalls[0].imgState==1) {
							this.imgNameShow = false
						}
						if (this.photoWalls[0].imgState==2) {
							this.imgName = '未通过'
							this.imgNameShow = true
						}
						if (this.photoWalls[0].imgState==3) {
							this.imgName = '审核中'
							this.imgNameShow = true
						}
						this.getinterestList()
						this.getState()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 编辑信息
			updateSelfInfoN(values) {
				// 编辑昵称
				if (this.num == 1 && this.userobjet == '') {
					uni.showToast({
						title: '请填写资料后，在进行保存~',
						icon: 'none',
						duration: 2000
					});
					return
				}
				// 编辑个性签名
				if (this.num == 2 && this.userobjet1 == '') {
					uni.showToast({
						title: '请填写资料后，在进行保存~',
						icon: 'none',
						duration: 2000
					});
					return
				}
				// 编辑昵称
				if (this.num == 1) {
					var data = {
						url: '/web/v2/api/userExtend/updateSelfInfoN',
						methods: 'post',
						data: {
							nickName: this.userobjet
						}
					}
				}
				// 编辑个性签名
				if (this.num == 2) {
					var data = {
						url: '/web/v2/api/userExtend/updateSelfInfoN',
						methods: 'post',
						data: {
							description: this.userobjet1
						}
					}
				}
				// 编辑个性标签
				if (this.num == 3) {
					var data = {
						url: '/web/v2/api/userExtend/updateSelfInfoN',
						methods: 'post',
						data: {
							interest: this.interestData.join(' / ')
						}
					}
				}
				// 编辑性别
				if (this.num == 4) {
					var sex = ''
					if (this.sexManShow) {
						sex = '1'
					}
					if (this.sexWomanShow) {
						sex = '2'
					}
					var data = {
						url: '/web/v2/api/userExtend/updateSelfInfoN',
						methods: 'post',
						data: {
							sex: sex
						}
					}
				}
				// 编辑年龄与星座{"age":"19","birthday":"1054396800000","constellation":"双子座"}
				if (this.num == 5) {
					this.defaultTime = values.year + '-' + values.month + '-' + values.day
					var data = {
						url: '/web/v2/api/userExtend/updateSelfInfoN',
						methods: 'post',
						data: {
							age: this.$global.getAge(values.timestamp + '000', this.myEditorProfile
								.adminServerNowTime),
							birthday: values.timestamp,
							constellation: this.$global.getAstro(values.month, values.day) + "座"
						}
					}
				}
				// 编辑身高体重{"stature":"200","weight":"50"}
				if (this.num == 6) {
					var data = {
						url: '/web/v2/api/userExtend/updateSelfInfoN',
						methods: 'post',
						data: {
							stature: this.selector1[0][values[0]],
							weight: this.selector1[1][values[1]]
						}
					}
				}
				// 编辑职业{"profession":"计算机／互联网／通信"}
				if (this.num == 7) {
					var data = {
						url: '/web/v2/api/userExtend/updateSelfInfoN',
						methods: 'post',
						data: {
							profession: this.selector[values[0]]
						}
					}
				}
				this.$http(data).then(res => {
					this.closePop()
					if (res.data.code == 21000) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getState(){
				var data = {
					url: '/web/v2/api/userExtend/updateSelfInfoN',
					methods: 'post',
					data: {
						
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
							if (res.data.data.modifyNickNameStatus==1) {
								this.NickNameShow = false
							}
							if (res.data.data.modifyNickNameStatus==2) {
								this.NickNameTip = '未通过'
								this.NickNameShow = true
							}
							if (res.data.data.modifyNickNameStatus==3) {
								this.NickNameTip = '审核中'
								this.NickNameShow = true
							}
							if (res.data.data.modifyDescrStatus==1) {
								this.modifyDescrShow = false
							}
							if (res.data.data.modifyDescrStatus==2) {
								this.modifyDescr = '未通过'
								this.modifyDescrShow = true
							}
							if (res.data.data.modifyDescrStatus==3) {
								this.modifyDescr = '审核中'
								this.modifyDescrShow = true
							}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 个性标签
			getinterestList() {
				var data = {
					url: '/web/v2/api/newApi/userInfo/interestList',
					methods: 'post',
					data: {

					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.interest = res.data.data.date
						this.interest = this.interest.map((item, key) => ({
							name: item,
							flag: false
						}));
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editor /deep/ .u-btn-picker {
		font-size: 32upx;
		color: #333333;
	}

	.editor /deep/ .u-picker__title {
		color: #333333;
		font-size: 34upx;
	}

	.editor /deep/ .u-drawer-content {
		border-radius: 30upx 30upx 0 0;
	}

	.editor /deep/ .uni-scroll-view {
		border-radius: 30upx 30upx 0 0;
	}

	.editor /deep/ .u-datetime-picker {
		border-radius: 30upx 30upx 0 0;
	}

	.editor /deep/ .u-picker-header {
		border-radius: 30upx 30upx 0 0;
	}

	.imgList {
		padding: 30upx 32upx 40upx;

		.headurl {
			width: 214upx;
			height: 214upx;
			border-radius: 20upx;
			margin-right: 22upx;
		}

		.add {
			width: 214upx;
			height: 214upx;
			background: #F7F7F7;
			border-radius: 20upx;
			display: inline-block;
			position: relative;

			.addimg {
				width: 36upx;
				height: 36upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}
	}

	.title {
		width: 100%;
		height: 86upx;
		line-height: 86upx;
		background: #F8F8F7;
		font-size: 28upx;
		color: #333333;
		padding-left: 32upx;
	}

	.list {
		font-size: 30upx;
		color: #999999;
		height: 94upx;
		line-height: 94upx;
		padding: 0 32upx;

		ul {
			display: flex;
			align-items: center;
		}

		.li2 {
			flex: 1;
			text-align: right;
		}

		.li3 {
			width: 32upx;

			.righticon {
				width: 32upx;
				height: 32upx;
				display: block;
				margin-left: 10upx;
			}
		}

		.btn {
			height: 54upx;
			line-height: 54upx;
			text-align: center;
			width: 165upx;
			background: #FF574D;
			border-radius: 27upx;
			font-size: 24upx;
			color: #FFFFFF;
			margin-left: auto;
		}

		.tip {
			padding: 10upx 28upx;
			font-size: 28upx;
			color: #FF574D;
			border-radius: 12upx;
			background: #ffeeee;
			margin-left: 20upx;
		}
	}

	.pop {
		background: #FFFFFF;
		border-radius: 30upx 30upx 0 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			height: 116upx;
			line-height: 116upx;
			margin-bottom: 20upx;
			font-size: 32upx;
			color: #333333;
			margin: 0 24upx;

			ul {
				display: flex;
			}

			.li2 {
				flex: 1;
				font-size: 34upx;
				text-align: center;
			}

			.li3 {
				color: #FF574D;
			}
		}

		.txt {
			height: 130upx;
			background: #F4F4F4;
			border-radius: 10upx;
			margin: 0 24upx;
			padding: 30upx 22upx;
			font-size: 26upx;
			color: #999999;

			.textarea {
				height: 80%;
				font-size: 34upx;
				color: #333333;
			}
		}

		.sex {
			display: flex;
			justify-content: center;

			.seximg {
				width: 170upx;
				height: 170upx;
			}

			.sextxt {
				font-size: 30upx;
				color: #C5CFD3;
				text-align: center;
			}
		}
	}
</style>
